<template>
<div>
<div class="recommend border-bottom">
<span class="iconfont zan">&#xe73c;</span>&nbsp;&nbsp;<span class="word" style="font-size: 0.34rem;">去哪儿推荐</span>
</div>
<ul class="schedule border-bottom">
<li class="lis  border-bottom" v-for="item of list" :key="item.id">
<div class="schedule-left">
<span>{{item.title}}</span>
<div class="left-yuding">
<img src="https://img1.qunarzz.com/piao/fusion/1804/25/792e9929973a9902.png">
{{ item.time}}
</div>
<div class="words">{{ item.word}}</div>
</div>
<div class="schedule-right">
<p>￥{{item.money}}</p>
<div>{{item.desc}}</div>
</div>
</li>
</ul>
</div>

</template>

<script>
export default {
  name: 'DetailRecommend',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .recommend
    position relative
    background #fff
    margin-bottom 0.2rem
    padding-left 0.2rem
    padding 0.4rem 0.2rem
  .lis
    padding 0.3rem 0rem
  .zan
    background-repeat no-repeat
    background-size 0.36rem 0.36rem
    background-position 0 center
    text-indent 0.36rem
    background-color mediumvioletred
    border-radius 50%
    color white
  .schedule
    background #F5F5F5
    overflow hidden
    margin-left 0.2rem
    li
      overflow hidden
      background white
    .schedule-left
      float left
      width 60%
      font-size 0.3rem
      line-height 0.4rem
      h3
        margin 0.2rem auto
      div
        margin-bottom 0.15rem
    .schedule-right
      float left
      width 40%
      p
        margin-top 0.5rem
        color orange
        text-align center
      div
        background orange
        color white
        margin-right 0.2rem
        text-align center
        border-radius 0.06rem
        padding 0.2rem 0
    .words
      color #00BCD4
      font-size 0.28rem
    .left-yuding
      img
        width: 0.28rem;
        height: 0.32rem;
</style>
